<template>
    <div class="activity step-box">
        <el-form
            ref="ruleFormRef"
            :model="form"
            :rules="rulesForm"
            label-width="100px"
            class="formData step-box"
            :disabled="pageType === 'look'">
            <el-row>
                <el-col :span="12"
                    ><el-form-item label="活码标题" prop="activity_name">
                        <el-input
                            v-model="form.activity_name"
                            class="title_input"
                            style="width: 100%"
                            maxlength="15"
                            placeholder="请输入活码标题"
                            show-word-limit
                            type="text" /> </el-form-item
                ></el-col>
            </el-row>
            <el-row>
                <el-col :span="12">
                    <el-form-item label="活码分组" prop="group_id">
                        <el-cascader
                            ref="cascaderRef"
                            v-model="form.group_id"
                            style="width: 100%"
                            :props="defaultProps1"
                            :options="groupOptions"
                            @change="orgChange" />
                    </el-form-item>
                </el-col>
            </el-row>
            <el-form-item label="活码有效期" prop="period_type">
                <el-radio-group v-model="form.period_type">
                    <el-radio :label="1">永久</el-radio>
                    <el-radio :label="2">固定期限</el-radio>
                    <div v-show="isShowTime" class="block">
                        <el-date-picker
                            v-model="form.activity_time"
                            type="datetimerange"
                            :disabled-date="disabledDate"
                            style="width: 400px"
                            format="YYYY-MM-DD HH:mm:ss"
                            value-format="YYYY-MM-DD HH:mm:ss"
                            range-separator="至"
                            start-placeholder="开始时间"
                            end-placeholder="结束时间"
                            :default-time="defaultTime()" />
                    </div>
                </el-radio-group>
            </el-form-item>
            <el-form-item label="二维码预览">
                <div class="form_upload">
                    <div>
                        <div class="code">
                            <el-image class="code_small_img" :src="form.avatar_link">
                                <template #error>
                                    <div class="image-slot">
                                        <el-icon>
                                            <icon-picture />
                                        </el-icon>
                                    </div>
                                </template>
                            </el-image>
                        </div>
                    </div>
                    <div>
                        <UploadImg
                            button-name="更换头像"
                            :rule="{
                                type: 'jpg|JPG|jpeg|JPEG|png|PNG',
                                unit: 'MB',
                                size: 2
                            }"
                            :url="form.avatar_link"
                            @submit="v => (form.avatar_link = v)" />
                        <!-- <Upload :pageType="isdesUp" :upInfo="picInfo" @submit="getFileList" ref="emptyData"></Upload> -->
                    </div>
                </div>
                <div class="warn">* 此二维码只是样式预览效果，请勿直接使用</div>
            </el-form-item>
        </el-form>
    </div>
    <!-- <div class="form_btn">
        <el-button @click="cancel">取消</el-button>
        <el-button type="primary" @click="next(ruleFormRef)">下一步</el-button>
    </div> -->
</template>

<script setup lang="ts">
import UploadImg from '@/view/smartMarketing/components/UploadImg.vue';
import { reactive, ref, watch, onMounted } from 'vue';
import Upload from '../../../components/ZWUpload.vue';
import { IsNotEmpty, defaultTime } from '@/utils/utils';
import { useRoute } from 'vue-router';
import router from '@/router';
import { useStore } from '@/store';
import { ElMessage, FormInstance } from 'element-plus';
import { Picture as IconPicture } from '@element-plus/icons-vue';
import { getGroupList } from '@/api/concreation';

import { lookGroupCode } from '@/api/smartMarketing/drainage/channelCode/index';
const route = useRoute();

const ruleFormRef = ref<FormInstance>();
const cascaderRef: any = ref(null); // 选择分组ref
const store = useStore();
const emit = defineEmits(['next', 'cancel']);
const props = withDefaults(defineProps<{ pageType: string; pageId: any }>(), {
    pageType: 'new',
    pageId: ''
});
const isShowTime = ref(false); // 是否显示时间选择器
const isdesUp = ref(false); //
const qr_code_link = ref(); //二维码中间图
const groupId = reactive([]);
const groupOptions = ref([]);
const pickerOptions = ref({});
const form = ref({
    activity_name: '',
    group_id: Number(route.query?.group_id),
    period_type: 1,
    activity_time: null,
    avatar_link: ''
});
const defaultProps1 = {
    checkStrictly: true, // 是否严格的遵守父子节点不互相关联
    emitPath: false,
    multiple: false,
    label: 'name',
    value: 'id'
};
// 规则
const rulesForm = reactive({
    activity_name: [{ required: true, message: '请输入活码标题', trigger: 'blur' }],
    group_id: [{ required: true, message: '请选择活码分组', trigger: 'blur' }],
    period_type: [{ required: true, message: '请选择活码分组', trigger: 'blur' }]
});

// 图片上传
const picInfo = reactive({
    type: 1,
    label: '',
    prop: 'images',
    files: form.value.images,
    multiple: true,
    limitSize: 10,
    limitNum: 9
});

const getFileList = (data: any) => {
    data = data.filter((item: any) => IsNotEmpty(item));
    if (data.length > 0) {
        form.value.avatar_link = data[0].url;
        qr_code_link.value = data[0].url;
    } else {
        qr_code_link.value = '';
    }
};
const getLook = () => {
    const v = {
        activity_id: props.pageId,
        step: 1
    };
    if (props.pageType === 'look' || props.pageType === 'edit') {
        lookGroupCode(v).then((res: any) => {
            form.value.activity_name = res.activity_name;
            form.value.group_id = res.group_id;
            form.value.activity_time = res.activity_time;
            form.value.period_type = res.period_type;
            form.value.avatar_link = res.avatar_link;
            qr_code_link.value = res.avatar_link;
        });
    }
};
// 选择完地区后立即关闭
const orgChange = () => {
    cascaderRef.value.togglePopperVisible();
};
getLook();
// 下一步
const next = () => {
    if (!ruleFormRef.value) return;
    ruleFormRef.value.validate(valid => {
        if (valid) {
            if (form.value.period_type == 2 && form.value.activity_time == null) {
                ElMessage.warning('请选择有效期时间');
            } else {
                emit('next');
                store.dispatch('newCode/basicData', form.value);
            }
        } else {
            return false;
        }
    });
};
// 取消
const cancel = () => {
    router.go(-1);
};
const disabledDate = (time: any) => {
    return time.getTime() < Date.now() - 8.64e7;
};

watch(
    () => form.value.period_type,
    (newVal: any) => {
        if (newVal == 2) {
            isShowTime.value = true;
        } else {
            isShowTime.value = false;
        }
    },
    { deep: true, immediate: true }
);
watch(
    () => props.pageType,
    (val: string) => {
        if (val === 'look') {
            isdesUp.value = true;
        }
    },
    { deep: true, immediate: true }
);

defineExpose({
    cancel,
    next
});
onMounted(() => {
    const Id = store.state.groupCode.groupId;
    Id.map((item: any) => {
        groupId.push(item);
    });
    getGroupList({ type: 12 }).then((res: any) => {
        groupOptions.value = res.data;
    });
});
</script>

<style lang="scss" scoped>
:deep(.formData) {
    // height: calc(100vh - 320px);
    // // height: 100%;
    // overflow: auto;
    .block {
        display: flex;
        align-items: center;
        justify-content: center;

        .time_border {
            width: 14px;
            margin: 0 13px;
            border-top: 1px solid #969696;
        }
    }

    .form_upload {
        display: flex;
        align-items: flex-end;
    }

    .warn {
        color: #969696;
        font-size: 12px;
    }

    .code {
        width: 260px;
        height: 260px;
        text-align: center;
        background: url('@/assets/image/LiveCode/qw_icon.png') center/100% no-repeat;
        box-shadow: 0 12px 48px 1px rgb(0 0 0 / 3%);
        border-radius: 10px;
        opacity: 1;
        border: 1px solid #eaeaea;
        margin-right: 25px;

        .code_small_img {
            width: 50px;
            height: 50px;
            margin: 105px 4px 0 0;

            :deep .el-image__error {
                font-size: 12px;
            }
        }
    }

    :deep .title_input {
        width: 580px;
    }

    :deep .el-date-editor.el-input,
    .el-date-editor.el-input__inner {
        width: 110px;
    }

    :deep .el-input--prefix .el-input__inner {
        width: 110px;
        padding: 0 12px;
    }
}

.activity {
    width: 100%;
    background-color: #fff;
}

.form_btn {
    margin-top: 15px;
    position: absolute;
    bottom: 0;
    background: #fff;
    padding: 10px;
    text-align: center;
    left: 20px;
    right: 20px;
    box-sizing: border-box;
    box-shadow: 0 4px 4px 1px rgb(240 240 240 / 50%);
    border-radius: 1px;
    opacity: 1;
    border: 1px solid #eaeaea;

    // bottom: 25px;
    // margin-left: -10%;
}
</style>
